import React, {Component} from "react";
import ReactDOM  from "react-dom";

// 类的方式,props不用声明,类中自带了
class Hello extends Component{

    // 推荐写法,把props写入
    constructor(props) {
        super(props)
        // 在构造函数中,要把props传递给super,不然这边是拿不到的
        console.log(this.props)
    }

    render() {
        const {name, age} = this.props

        return (
            <div>
                <h1>props:{name}, {age}</h1>
            </div>
        )
    }
}

ReactDOM.render(<Hello name='rose' age={19} />, document.getElementById('root'))
// propes可以传递任何类型的对象(数组,函数,jsx等)
// props是只读对象,不能修改



// // 函数的方式
// // 接受数据,props是约定的参数,可以其他命名
// const Hello = (props) => {
//     // props是一个对象
//     return (
//         <div>
//             <h1>props:{props.name}, age:{props.age}</h1>
//         </div>
//     )
// }
// // 传递数据
// ReactDOM.render(<Hello name='jack' age={19} />, document.getElementById('root'))
